<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新增的表单元素</title>
</head>
<body>
    <form action="">
        <p>专业：
            <select name="" id="">
                <option value="1">前端与移动端开发</option>
                <option value="2">Java企业级开发</option>
                <option value="3">Java大数据开发</option>
                <option value="4">Python与人工智能</option>
            </select>
        </p>
        <!-- 不仅需要选择，而且需要输入 -->
        <p>
            <!-- list 建立输入框与datalist的连接
                list 指向 datalist 的 id 属性的值
            -->
            专业：<input type="text" list="cousre">
            <!-- 通过 datalist 创建选择列表
                value 具体的值 
                label 提示信息，辅助值
                datalist 不同浏览器兼容性不一样，实际开发中不推荐使用
            -->
            <datalist id="cousre">
                <option value="前端与移动端开发" label="UI设计，前景好"></option>
                <option value="Java企业级开发" label="行业老大，挣钱多"></option>
                <option value="Java大数据开发" label="国家关注技术"></option>
                <option value="Python与人工智能" label="不知道"></option>
            </datalist>
        </p>
        <!-- 如果 datalist 关联的表单元素是url类型，那么 option 元素的 value 属性中的值 必须包含 http:// -->
        <p>网址：<input type="url" name="url" list="urls">
            <datalist id="urls">
                <option value="http://www.baidu.com" label="百度一下，你就知道"></option>
                <option value="http://www.chinaunicom.cn" label="中国联通"></option>
            </datalist>
        </p>
    </form>
</body>
</html>